<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getOrderSales } from '@/api/shop'
	
	const loading = ref(false)
	const form = ref({
		list: [],
		images: []
	})
	
	function getData(id) {
		loading.value = true
		getOrderSales(id).then(res => {
			let result = res.result || {images: []}
			result.list.forEach(item => item.expand = false)
			form.value = result
			loading.value = false
		}).catch(() => loading.value = false)
	}
	function changeDetailExpand(item) {
		item.expand = !item.expand
	}
	function typeToText(value) {
		switch(value) {
			case 'CLOSED': return '包装破损';
			case 'ORDERED': return '商品质量问题';
			case 'PAID': return '发错货';
			case 'SHIPPED': return '商品与描述不符';
			case 'DELIVERED': return '其他';
			default: return '未知'
		}
	}
	function viewImg(index) {
		let urls = form.value.images.map(item => item.furl)
		uni.previewImage({
			current: index,
			urls
		})
	}
	
	onLoad((option) => {
		let id = option.id
		if(id) getData(id)
	})
</script>

<template>
	<view class="app-container">
		<view class="app-content">
			<view class="status-box">
				<view class="pay-status" v-if="form.saleStatus === 1">
					<view class="status-info status-title"><uv-icon name="clock" color="#FF7640" size="50" /><text>审核中</text></view>
					<view class="status-tip">等待相宴审核，请耐心等待</view>
				</view>
				<view class="pay-status" v-else-if="form.saleStatus === 2">
					<uv-image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2024-11-18/1731915302994_registerSuccess.png"
						width="330" height="234"></uv-image>
					<text class="status-title">售后通过</text>
					<text class="status-tip">{{form.refundTime? '退款成功' : '等待退款'}}</text>
				</view>
				<view class="pay-status" v-else-if="form.saleStatus === 3">
					<view class="status-info status-title"><uv-icon name="close-circle" color="#FF7640" size="50" /><text>售后驳回</text></view>
					<text class="status-tip">驳回原因：{{form.auditRemark || '--'}}</text>
				</view>
				<view class="pay-status" v-else>
					<view class="status-info status-title"><uv-icon name="close-circle" color="#FF7640" size="50" /><text>状态未知</text></view>
					<view class="status-tip">请联系相宴售后</view>
				</view>
			</view>
			<view class="box-view" v-if="form.saleStatus === 2">
				<view class="box-title">退款信息</view>
				<view class="box-row"><text class="label">退款金额：</text>
					<text v-if="form.type === 'INTEGRAL'">{{form.refundAmount || 0}}积分</text>
					<text v-else>￥{{form.refundAmount? form.refundAmount.toFixed(2) : 0.00}}</text>
				</view>
				<view class="box-row"><text class="label">审核备注：</text><text>{{form.auditRemark || '--'}}</text></view>
				<view class="box-row"><text class="label">退款渠道：</text><text>付款账户原路返回</text></view>
			</view>
			<view class="box-view">
				<view class="box-title">申请信息</view>
				<view class="box-row">
					<view v-for="item in form.list" :key="item.itemId" class="good-box">
						<goods v-model="item.num" :img="item.image && item.image.furl" :name="item.name" :price="item.price" :total="item.subtotal" :specs="item.specs"
						:mode="form.type === 'INTEGRAL'? 'viewP' : 'viewM'"></goods>
						<view class="goods-detail" v-if="item.type === 'DISHES' || item.type === 'DEVICE'">
							<template v-if="item.children && item.children.length">
								<view class="goods-detail-box" v-if="item.expand">
									<view class="goods-detail-item" v-for="child in item.children" :key="child.id">
										<goods v-model="child.number" :img="child.furl" :name="child.name" :price="child.price" :specs="child.specs" mode="viewD"
											v-if="child.name"></goods>
										<goods v-model="child.num" mode="invalidD" v-else></goods>
									</view>
								</view>
							</template>
							<view class="goods-detail-expand" @click="changeDetailExpand(item)">
								<text class="more-text">{{ item.expand? '收起' : '查看明细详情'}}</text>
								<uv-icon :name="item.expand? 'arrow-up-fill' : 'arrow-down-fill'" color="#4E5969" size="24"></uv-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="box-row"><text class="label">订单编码：</text><text>{{form.code || '--'}}</text></view>
				<view class="box-row"><text class="label">售后原因：</text><text>{{typeToText(form.reason)}}</text></view>
				<view class="box-row"><text class="label">申请金额：</text>
					<text v-if="form.type === 'INTEGRAL'">{{form.applyAmount || 0}}积分</text>
					<text v-else>￥{{form.applyAmount? form.applyAmount.toFixed(2) : 0.00}}</text>
				</view>
				<view class="box-row"><text class="label">问题描述：</text><text>{{form.description || '--'}}</text></view>
				<view class="image-row"><text class="label">凭&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证：</text>
					<view class="image-box">
						<view class="image-item" v-for="(img, index) in form.images" :key="index">
							<uv-image :src="img && img.furl" width="144" height="144" @click="viewImg(index)"></uv-image>
						</view>
					</view>
				</view>
			</view>
			<view class="box-view">
				<view class="box-title">时间</view>
				<view class="box-row">
					<uv-steps :current="form.auditTime? 0: 1" dot direction="column" active-color="#767473" inactive-color="#FF0D0D" 
						:custom-style="{paddingTop: '10rpx'}">
						<uv-steps-item :custom-style="{paddingBottom: '26rpx'}">
							<template v-slot:title>
								<view class="steps-row">
									<text class="label">退款时间：</text>
									<text>{{form.saleStatus === 2 ? form.refundTime || '等待退款' : '--'}}</text>
								</view>
							</template>
						</uv-steps-item>
						<uv-steps-item :custom-style="{paddingBottom: '26rpx'}">
							<template v-slot:title>
								<view class="steps-row"><text class="label">审核时间：</text><text>{{form.auditTime || '等待审核'}}</text></view>
							</template>
						</uv-steps-item>
						<uv-steps-item :custom-style="{paddingBottom: '0'}">
							<template v-slot:title>
								<view class="steps-row"><text class="label">申请时间：</text><text>{{form.applyTime || '--'}}</text></view>
							</template>
						</uv-steps-item>
					</uv-steps>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-top: 2rpx;
		.app-content{
			.status-box{
				border-radius: 0 0 16rpx 16rpx;
				padding: 32rpx;
				background-color: #FFFFFF;
				.pay-status{
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 16rpx;
					.status-info{
						display: flex;
						align-items: center;
						gap: 16rpx;
					}
					.status-tip{
						color: #767473;
						text-align: center;
					}
					.status-title{
						font-weight: 600;
						font-size: var(--theme-xl);
						line-height: var(--theme-xl-line);
					}
				}
			}
			.box-view{
				margin: 24rpx 24rpx 0;
				padding: 24rpx;
				border-radius: 16rpx;
				background-color: #FFFFFF;
				.box-title{
					padding-bottom: 16rpx;
					border-bottom: 2rpx solid #F4F4F4;
					font-weight: 600;
					font-size: var(--theme-lg);
					line-height: var(--theme-lg-line);
				}
				.box-row{
					margin-top: 16rpx;
					.label{
						color: #767473;
					}
				}
				.steps-row{
					margin-top: -5px;
				}
				::v-deep .uv-steps-item__wrapper--column--dot{
					height: 10px;
				}
			}
			.good-box{
				padding-top: 8rpx;
			}
			.good-box + .good-box{
				border-top: 2rpx solid #F4F4F4;
			}
			.goods-detail {
				border-top: 2rpx solid #EAEAEA;
				font-size: 28rpx;
				.goods-detail-box{
					padding: 16rpx 0;
					display: flex;
					flex-direction: column;
					gap: 16rpx;
				}
				.goods-detail-expand {
					padding-top: 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 20rpx;
					color: #767473;
				}
				.goods-detail-box + .goods-detail-expand{
					border-top: 2rpx solid #EAEAEA;
				}
			}
			.image-row{
				margin-top: 16rpx;
				display: flex;
				align-items: flex-start;
				.label{
					color: #767473;
				}
			}
			.image-box{
				width: 100%;
				display: flex;
				gap: 36rpx;
				.image-item{
					width: 144rpx;
					height: 144rpx;
					border-radius: 8rpx;
					background-color: #F8F5F5;
					position: relative;
				}
			}
		}
	}
</style>